{include file="common/head"/}
<div class="admin-main layui-anim layui-anim-upbit">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>添加房间</legend>
    </fieldset>
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">封面图</label>
            <input type="hidden" lay-verify="logo" name="logo" id="logo2" value="">
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-primary" id="logoBtn2"><i
                            class="icon icon-upload3"></i>点击上传</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="SLogo2" src="">
                        <p id="demoText2"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">酒店banner图</label>
            <input type="hidden" lay-verify="banner" name="images" id="banner2" value="">
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-primary" id="bannerBtn2"><i
                            class="icon icon-upload3"></i>点击上传</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="bannerBtn3"><i
                            class="icon icon-upload3"></i>清空重新上传</button>
                    <div class="layui-upload-list" id="Sbanner2">

                        <p id="demoText2"></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">一级分类</label>
            <div class="layui-input-inline">
                <select name="one_cate" lay-filter="category" lay-verify="one_cate" lay-search placeholder="请选择一级分类"
                    id="category">
                    <option>请先选择一级分类</option>
                    <option value="0">过夜房</option>
                    <option value="1">钟点房</option>
                </select>
            </div>
            <div class="layui-form-mid layui-word-aux">钟点房，过夜房</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">二级分类</label>
            <div class="layui-input-inline">
                <select name="two_cate" lay-filter="two_cate" lay-search lay-verify="two_cate" placeholder="请选择二级分类"
                    id="coupon_id">
                    <option>请选择二级分类</option>
                </select>
            </div>
            <div class="layui-form-mid layui-word-aux">房间类型</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">划线价</label>
            <div class="layui-input-4">
                <input type="text" maxlength="200" name="old_price" value="" lay-verify="required" placeholder="请输入原价"
                    class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">公众号展示的划线价格，只作为展示使用</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">现价</label>
            <div class="layui-input-4">
                <input type="text" maxlength="200" name="new_price" value="" lay-verify="required" placeholder="请输入活动价"
                    class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">购房实际计算价格</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">床型</label>
            <div class="layui-input-4">
                <input type="text" maxlength="200" name="bed" value="" lay-verify="required" placeholder="请输入床型"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">面积</label>
            <div class="layui-input-4">
                <input type="text" maxlength="200" name="area" value="" lay-verify="required" placeholder="请输入房间面积"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">楼层</label>
            <div class="layui-input-4">
                <input type="text" maxlength="200" name="floor" value="" lay-verify="required" placeholder="请输入楼层"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">简介</label>
            <div class="layui-input-block fhyp">
                <textarea name="description" max-length="255" class="layui-textarea " lay-verify="required"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">支持优惠券</label>
            <div class="layui-input-4">
                <input type="radio" name="is_coupon" value="0" lay-verify="required" title="支持" checked>
                <input type="radio" name="is_coupon" value="1" lay-verify="required" title="不支持">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">支持次卡</label>
            <div class="layui-input-4">
                <input type="radio" name="is_second" lay-verify="required" value="0" title="支持" checked>
                <input type="radio" name="is_second" lay-verify="required" value="1" title="不支持">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">支持余额</label>
            <div class="layui-input-4">
                <input type="radio" name="is_recharge" lay-verify="required" value="0" title="支持" checked>
                <input type="radio" name="is_recharge" lay-verify="required" value="1" title="不支持">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-4">
                <input type="radio" name="status" value="0" lay-verify="required" title="正常" checked>
                <input type="radio" name="status" value="1" lay-verify="required" title="下架">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">支持活动</label>
            <div class="layui-input-4">
                <input type="radio" name="is_activity" lay-verify="required" value="1" title="支持">
                <input type="radio" name="is_activity" lay-verify="required" value="0" title="不支持" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">房间数量</label>
            <div class="layui-input-4">
                <input type="text" maxlength="200" name="room_num" value="-1" lay-verify="required|number"
                    placeholder="请输入房间数量-1为不限制" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">填写这类房间上架数量，数量不足时用户无法下单（纯数字）</div>
        </div>



        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="submit" lay-submit=""
                    lay-filter="sys">{:lang('submit')}</button>
            </div>
        </div>
    </form>
</div>
{include file="common/foot"/}
<script>
    let img_url = []
    // let img_url =$('#banner2').val().split(',')

    // if(img_url.length >0){
    //     let text = ''
    //     for(let i=0; i<img_url.length;i++){
    //         text+=`<img class="layui-upload-img" src="${img_url[i]}">`
    //     }
    //     $('#Sbanner2').html(text)
    // }

    $('#bannerBtn3').click(function () {
        img_url = []
        $('#banner2').val(img_url)
        $('#Sbanner2 img').remove()

    })

    layui.use(['form', 'layer', 'upload'], function () {
        var form = layui.form, layer = layui.layer, upload = layui.upload, $ = layui.jquery;
        form.verify({
            title: function (value) {
                if (value == '') {
                    return '请输入优惠券分类名称!';
                }
            },

        });
        form.verify({
            logo: function (value) {
                if (value == '') {
                    return '请上传logo图！';
                }
            },
            banner: function (value) {
                if (value == '') {
                    return '请上传酒店banner图！';
                }
            },
            one_cate: function (value) {
                if (value == '') {
                    return '请选择一级分类！';
                }
            },
            two_cate: function (value) {
                if (value == '') {
                    return '请选择二级分类！';
                }
            }
        });

        //普通图片上传    
        var uploadInst2 = upload.render({
            elem: '#logoBtn2'
            , url: '{:url("UpFiles/upload")}',
            accept: 'images',
            acceptMime: 'image/*'
            , size: 0
            , multiple: true
            , number: 1
            , before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#SLogo2').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                if (res.errorCode == 8888) {
                    $('#logo2').val(res.url);
                } else {
                    $('#SLogo2').attr('src', '');
                    layer.msg(res.msg, { time: 2000, icon: 2 });
                }
            }
        });




        var uploadInst3 = upload.render({
            elem: '#bannerBtn2'
            , url: '{:url("UpFiles/upload")}',
            accept: 'images',
            acceptMime: 'image/*'
            , size: 0
            , multiple: true
            , number: 6
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                img_url = $('#banner2').val().split(',')
                obj.preview(function (index, file, result) {
                    let img = document.createElement('img')
                    img.src = result
                    img.className = 'layui-upload-img'
                    $('#Sbanner2').append(img); //图片链接（base64）
                });
            }
            , done: function (res) {
                if (res.errorCode == 8888) {
                    if (img_url.leng <= 1 && !img_url[0]) {
                        $('#banner2').val(res.url);
                    } else {
                        img_url.push(res.url)
                        $('#banner2').val(img_url.join(','));
                        layer.msg(res.msg, { time: 1000, icon: 1 });
                    }
                } else {
                    $('#Sbanner2').attr('src', '');
                    layer.msg(res.msg, { time: 2000, icon: 2 });
                }
            }
        });












        //提交监听
        form.on('select(category)', function (obj) {
            let val = obj.value
            $.post('{:url("getcate")}', { father_id: val }, function (res) {
                let data = res.data
                if (data.length > 0) {
                    let leng = data.length
                    $('#coupon_id').html('')
                    for (let i = 0; i < leng; i++) {
                        $('#coupon_id').append(new Option(data[i].title, data[i].id))
                    }

                    form.render();
                }

            })

        });



        form.on('submit(sys)', function (data) {
            $("#submit").attr({ disabled: "disabled" });
            loading = layer.load(1, { shade: [0.1, '#fff'] });



            let banner = data.field.images.split(',')
            if (banner.length > 0 && banner[0] == '') {
                banner.shift()
            }
            data.field.images = banner.join()
            $.post("{:url('add')}", data.field, function (res) {
                layer.close(loading);
                if (res.errorCode == 8888) {
                    layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
                        location.href = '{:url("index")}';
                    });
                } else {
                    $("#submit").removeAttr("disabled");
                    layer.msg(res.msg, { icon: 2, time: 1000 });
                }
            });
        })
    })


</script>


</body>

</html>